<template>
	<view class="search-bar">
		<!-- 菜单图标字体 -->
		<uni-icons @click="showDrawer" class='bars' type="bars" color="#fff" size="26"></uni-icons>
		<!-- 抽屉 固定定位元素 -->
		<uni-drawer ref="leftDrawer">
			<view style="padding:30rpx;">
				<uni-list>
					<uni-list-item title="首页" link='switchTab' to="../../pages/index/index" ></uni-list-item>
					<uni-list-item title="品牌馆" link='switchTab' to="../../pages/brands/brands"></uni-list-item>
					<uni-list-item title="产品分类" link='switchTab' to="../../pages/product-category/product-category"></uni-list-item>
					<uni-list-item title="登录" link='switchTab' to="../../pages/user-center/user-center"></uni-list-item>
					<uni-list-item title="注册" link='switchTab' to="../../pages/user-center/user-center"></uni-list-item>
				</uni-list>
				<button @click="closeDrawer" type="default" size="mini">关闭</button>
			</view>
		</uni-drawer>
		
		<!-- 搜索框 -->
		<view class="input-group" @click="jumpToSearch">
			<input type="text" placeholder="请输入商品关键字" disabled>
			<image src="../../static/img/logo-s.png" mode=""></image>
			<uni-icons class='search' type="search" color="#888" size="22"></uni-icons>
		</view>
		<!-- 登录 -->
		<navigator class="link" open-type="switchTab" url="/pages/user-center/user-center">登录</navigator>
	</view>
</template>

<script>
	export default {
		name:"xz-search-bar",
		data() {
			return {
				
			};
		},
		methods: {
			jumpToSearch() {
				uni.navigateTo({
					url:'../../pages/product-search/product-search'
				})
			},
			showDrawer(){
				this.$refs.leftDrawer.open()
			},
			closeDrawer(){
				this.$refs.leftDrawer.close()
			}
			
		},
		
	}
</script>

<style lang="scss">
	.search-bar{
		display: flex;
		align-items: center;
		background-color: $xz-theme;
		padding: 20px 6px;
		.bars{
			
		}
		.input-group{
			flex: 1;
			position: relative;
			margin: 0 6px;
			input{
				background-color: #fff;
				text-align: center;
				height: 28px;
				border-radius: 13px;
				font-size: $uni-font-size-base;
				
			}
			image{
				width: 18px;
				height: 18px;
				position: absolute;
				top: 6px;
				left: 8px;
			}
			.search{
				position: absolute;
				right: 7px;
				top:3px;
			}
		}
		.link{
			color: #fff;
		}
	}
</style>